import React, { Component } from 'react'
import { connect } from 'react-redux';
import { getUserList } from './actions/user';

export class Page1 extends Component {
    render() {
        const { userList, loading } = this.props;
        return (
            <div>
                <button disabled={loading} onClick={() => {
                    this.props.getUserList();
                }}>{loading ? '加载中' : '点击获取用户列表'}</button>
                <h2>用户列表</h2>
                <ul>
                    {userList.map(user => <li key={user.id}>{user.name}</li>)}
                </ul>
            </div>
        )
    }
}

// 顾名思义，将reducer中的state映射到props中
const mapStateToProps = (state) => ({
    userList: state.user.list,
    loading: state.user.loading
})

// 同上，将action映射到props
const mapDispatchToProps = {
    // 获取用户列表
    getUserList
}

// 如何映射呢，通过以下connect方法的固定形式
export default connect(mapStateToProps, mapDispatchToProps)(Page1)

